<script setup lang='ts'>
import { useAddOrEditJcOrgSys, useGetJcOrgDataSourceInfo, useGetjcOrgSysInfo } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const enterpriseTypeOptions = defineModel<any>('enterpriseTypeOptions')
const { path } = useRoute()

const treeSelect = defineModel<any>('treeSelect')

const isSetting = path.includes('organization-setting')

const { isPending, mutate } = useAddOrEditJcOrgSys()

const id = defineModel<any>('id')

const visible = defineModel<boolean>('visible', { required: true })

const showType = defineModel<'edit' | 'view'>('showType')

const isEdit = showType.value === 'edit'

const dialog = computed(() => isEdit ? '编辑详情' : '查看详情')

const formRef = ref()

const state = ref<any>({

})

const columns = computed<any []>(() => {
    return [
        {
            colProps: {
                span: 12,
            },
            hideInForm: !isSetting,
            label: '组织来源',
            prop: 'source',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: !isSetting,
            label: '组织编码',
            prop: 'orgCode',
            valueType: 'text',
        },
        {
            colProps: {
                span: 24,
            },
            hideInForm: !isSetting,
            label: '系统组织编码',
            prop: 'linkZzbm',
            valueType: 'text',
        },
        {
            colProps: {
                span: 24,
            },
            hideInForm: isSetting,
            label: '城建集团组织编码',
            prop: 'ZZ_ZZBM',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            label: '组织全称',
            prop: isSetting ? 'orgName' : 'ZZ_ZZQC',
            // valueType: isEdit ? 'input' : 'text',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            label: '组织简称',
            prop: isSetting ? 'orgShortName' : 'ZZ_ZZJC',
            // valueType: isEdit ? 'input' : 'text',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            fieldProps: {
                filterable: true,
                props: {
                    checkStrictly: true,
                    children: 'childs',
                    emitPath: false,
                    label: 'orgName',
                    value: 'orgCode',
                },
                showAllLevels: false,
            },
            label: '上级组织',
            options: treeSelect,
            prop: !isSetting ? 'ZZ_SJZZ' : isEdit ? 'parentCode' : 'parentName',
            valueType: isEdit ? 'cascader' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            fieldProps: {
                onChange: () => {
                    state.value.unitType = null
                },
            },
            label: '组织类别',
            options: [
                {
                    label: '单位',
                    value: 0,
                },
                {
                    label: '部门',
                    value: 1,
                },
            ],
            prop: !isSetting ? 'ZZ_ZZLB' : 'orgType',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: computed(() => state.value.orgType !== 0),
            label: '统一社会信用代码',
            prop: 'unifiedSocialCreditCode',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: isSetting,
            label: '组织负责人',
            prop: 'orgLeader',
            valueType: isEdit ? 'input' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: isSetting,
            label: '组织分管领导',
            prop: 'orgDeputyLeader',
            valueType: isEdit ? 'input' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: isSetting,
            label: '虚拟组织',
            prop: 'ZZ_XNZZ',
            valueType: isEdit ? 'input' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            label: '组织状态',
            options: [
                {
                    label: '停用',
                    value: 0,
                },
                {
                    label: '启用',
                    value: 1,
                },
            ],
            prop: !isSetting ? 'ZZ_ZZZT' : 'orgStatus',
            valueType: isEdit ? 'select' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: computed(() => !isSetting || state.value.orgType !== 0),
            label: '单位类型',
            options: enterpriseTypeOptions,
            prop: 'unitType',
            valueType: isEdit ? 'select' : 'text',
        },
        {
            colProps: {
                span: 12,
            },
            hideInForm: isSetting,
            label: '所属单位',
            prop: isSetting ? 'orgUnit' : 'ZZ_SSDW',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            label: '修改人',
            prop: 'updateUser',
            valueType: 'text',
        },
        {
            colProps: {
                span: 12,
            },
            label: '修改时间',
            prop: isSetting ? 'updateTime' : 'ZZ_XGSJ',
            valueType: 'text',
        },
    ]
})

const rules = {
    orgName: [
        {
            message: '请输入组织全称',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    orgStatus: [
        {
            message: '请输入组织状态',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    // orgType: [
    //     {
    //         message: '请选择组织类别',
    //         required: true,
    //         trigger: ['blur', 'change'],
    //     },
    // ],
    parentCode: [
        {
            message: '请选择上级组织',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    unitType: [
        {
            message: '请选择单位类型',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
}

const { data: OrgDataSourceInfoData, isLoading: OrgDataSourceInfoLoading } = isSetting ? useGetjcOrgSysInfo(id) : useGetJcOrgDataSourceInfo(id)

const loading = computed(() => OrgDataSourceInfoLoading.value)

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    formRef.value.formInstance.resetFields()
    state.value = {}
}

async function confirm() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            ...state.value,
            type: 'edit',
        }
        console.log('🚀 ~ confirm ~ params:', params)
        if (params.orgType === 1 && params.unifiedSocialCreditCode) {
            params.unifiedSocialCreditCode = ''
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

watchEffect(() => {
    if (OrgDataSourceInfoData.value) {
        state.value = cloneDeep(OrgDataSourceInfoData.value)
        if (isSetting && !isEdit) {
            console.log(enterpriseTypeOptions.value.filter((item: any) => item.value === state.value?.unitType)?.[0]?.label, '===')
            state.value.unitType = enterpriseTypeOptions.value.filter((item: any) => item.value === state.value?.unitType)?.[0]?.label || ''
            state.value.orgStatus = state.value?.orgStatus === 0 ? '停用' : '启用'
        }
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"

                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="loading"
                    animated
        />

        <PlusForm v-else
                  ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  :row-props="{ gutter: 20 }"
                  :rules="isEdit ? rules : {}"
        >
            <template #plus-field-orgType>
                {{ state.orgType === 0 ? '单位' : '部门' }}
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn v-if="showType === 'edit'"
                           type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
